<!--
 * @Description: file content
 * @Author: oooh
 * @Date: 2024-04-18 11:37:16
 * @LastEditors: oooh
 * @LastEditTime: 2024-06-19 10:20:21
 * @FilePath: \Civil_Servant_Performance_PC\src\views\workbench\leader\index.vue
-->
<template>
  <div class="app-container workbench-container">
    <div class="header">
      <div>
        <span class="header-title">[{{ dept.deptName }}] {{ nickName }}</span>
        <span class="pl-10 header-title-normal">工作台</span>
      </div>
      <div class="header-dropdown">
        <el-dropdown trigger="click" @command="handleCommandYear">
          <span class="header-dropdown-title">
            {{ optionsFormat(queryParams.year, yearOptions) }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="item in yearOptions" :key="item.value" :command="item.value" :label="item.label" :value="item.value">
              {{ item.label }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

        <el-dropdown trigger="click" class="ml-10" @command="handleCommandQuarter">
          <span class="header-dropdown-title">
            {{ optionsFormat(queryParams.quarter, quarterOptions) }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="item in quarterOptions" :key="item.value" :command="item.value" :label="item.label" :value="item.value">{{
              item.label
            }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <right-toolbar :search="false" @queryTable="getList"></right-toolbar>
    </div>
    <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport('dept')" class="float-right mb-10"> 导出 </el-button>

    <el-table :data="deptTableList" border v-loading="deptLoading" stripe header-cell-class-name="table-header">
      <el-table-column label="序号" type="index" align="center">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="站办所" prop="deptName" align="center"></el-table-column>
      <el-table-column v-for="item in deptColumns" :key="item.prop" :label="item.label" :prop="item.prop" align="center">
        <template slot-scope="scope">
          <el-button type="text" v-if="scope.row[item.prop]" @click="handleToPage(item, scope.row)">
            <i class="el-icon-check table-icon"></i>
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="得分" prop="score" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.score || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="全镇排名" prop="rank" align="center">
        <template slot-scope="scope">
          <span>{{ formatRankingRange(scope.row.rank) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="等次" prop="gradeDict" align="center">
        <template slot-scope="scope">
          <dict-tag v-if="scope.row.gradeDict" :options="dict.type.biz_work_grade" :value="scope.row.gradeDict"></dict-tag>
          <span v-else>-</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="title-banner">
      <span class="title-banner-icon"></span> <span>干部绩效情况</span>
      <el-cascader
        class="ml-10"
        v-model="queryParams.deptId"
        :options="deptOptions"
        :show-all-levels="false"
        :props="{ checkStrictly: true, value: 'deptId', label: 'deptName', checkStrictly: true, emitPath: false }"
        placeholder="选择站办所"
        filterable
        clearable
        @change="handleDeptChange"
        ref="CascaderRef"
      ></el-cascader>
      <div style="flex: 1; text-align: right; align-self: flex-start">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport('civil')"> 导出 </el-button>
      </div>
    </div>
    <el-table :data="civilTableList" border v-loading="civilLoading" stripe header-cell-class-name="table-header">
      <el-table-column label="序号" type="index" align="center">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="干部" prop="civilServantName" align="center"></el-table-column>
      <el-table-column label="站办所" prop="deptName" align="center"></el-table-column>
      <el-table-column v-for="item in civilColumns" :key="item.prop" :label="item.label" :prop="item.prop" align="center">
        <template slot-scope="scope">
          <el-button type="text" v-if="scope.row[item.prop]" @click="handleToPage(item, scope.row)">
            <i class="el-icon-check table-icon"></i>
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="得分" prop="score" align="center"></el-table-column>
      <el-table-column label="站办所排名" prop="deptRank" align="center"></el-table-column>
      <el-table-column label="全镇排名" prop="townRank" align="center">
        <template slot-scope="scope">
          <span>{{ formatRankingRange(scope.row.townRank) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="等次" prop="gradeDict" align="center">
        <template slot-scope="scope">
          <dict-tag v-if="scope.row.gradeDict" :options="dict.type.biz_personal_work_grade" :value="scope.row.gradeDict"></dict-tag>
          <span v-else>-</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { listLeaders as listDeptWork, listLeadersCadres as listCivilWork } from '@/api/workbench'
import { getDicts } from '@/api/system/dict/data.js'
import { quarterFormat } from '@/utils/quarter.js'
import { deptTreeSelect } from '@/api/system/user'
import { getConfigKey } from '@/api/system/config'

export default {
  name: 'general-user',
  props: {},
  dicts: ['biz_work_year_list', 'biz_personal_work_grade', 'biz_work_grade'],
  components: {},
  data() {
    return {
      deptTableList: [],
      civilTableList: [],
      deptColumns: [
        {
          label: '重点工作计划',
          path: '/performance-inventory',
          prop: 'importantWorkSubmit',
          query: {
            type: 'dept',
            tabs: 'key-work'
          }
        },
        {
          label: '重点工作纪实',
          path: '/performance-inventory',
          prop: 'importantWorkReport',
          query: {
            type: 'dept',
            tabs: 'key-work'
          }
        },
        {
          label: '中心工作计划\n（责任站办所）',
          path: '/performance-inventory',
          prop: 'centerWorkSubmit',
          query: {
            type: 'dept',
            tabs: 'center-work'
          }
        },
        {
          label: '中心工作纪实\n（责任站办所）',
          path: '/performance-inventory',
          prop: 'centerWorkReport',
          query: {
            type: 'dept',
            tabs: 'center-work'
          }
        },
        {
          label: '工作效能评价',
          path: '/performance-inventory',
          prop: 'disciplineEvaluate',
          query: {
            type: 'dept',
            tabs: 'jjb-evaluation-comment'
          }
        },
        {
          label: '服务效能评价',
          path: '/performance-inventory',
          prop: 'performanceEvaluate',
          query: {
            type: 'dept',
            tabs: 'jxb-evaluation-comment'
          }
        },
        {
          label: '负面清单',
          path: '/performance-inventory',
          prop: 'punishmentInventory',
          query: {
            type: 'dept',
            tabs: 'negative-list'
          }
        },

        {
          label: '荣誉奖励典型推介\n（纳入年度）',
          path: '/performance-inventory',
          prop: 'yearHonorApply',
          query: {
            type: 'dept',
            tabs: 'dept-honor'
          }
        }
      ],
      civilColumns: [
        {
          label: '工作计划',
          path: '/performance-inventory',
          prop: 'workPlan',
          query: {
            type: 'civil',
            tabs: 'work-list'
          }
        },
        {
          label: '工作纪实',
          path: '/performance-inventory',
          prop: 'workReport',
          query: {
            type: 'civil',
            tabs: 'work-list'
          }
        },
        {
          label: '平时考核登记表',
          path: '/performance-inventory',
          prop: 'workRegistration',
          query: {
            type: 'civil',
            tabs: 'daily-performance'
          }
        },
        {
          label: '民主测评',
          path: '/performance-inventory',
          prop: 'democraticEvaluate',
          query: {
            type: 'civil',
            tabs: 'democratic-evaluation'
          }
        },
        {
          label: '争先创优',
          path: '/performance-inventory',
          prop: 'excellentApply',
          query: {
            type: 'civil',
            tabs: 'excellent-rating'
          }
        },
        {
          label: '负面清单',
          path: '/performance-inventory',
          prop: 'punishmentInventory',
          query: {
            type: 'civil',
            tabs: 'civil-negative-list'
          }
        },
        {
          label: '荣誉奖励\n（纳入年度）',
          path: '/performance-inventory',
          prop: 'yearHonorApply',
          query: {
            type: 'civil',
            tabs: 'annual-honor'
          }
        }
      ],
      deptLoading: false,
      civilLoading: false,
      queryParams: {
        deptId: '',
        year: '',
        quarter: ''
      },
      deptOptions: [],
      yearOptions: [],
      quarterOptions: []
    }
  },
  computed: {
    ...mapGetters(['nickName', 'dept'])
  },
  watch: {},
  created() {
    this.getConfigKey()
    ;(async () => {
      await this.getDicts()
      this.handleCommandYear(this.queryParams.year)
    })()
    this.getDeptTree()
  },
  methods: {
    getConfigKey() {
      getConfigKey('sys.performanceGrade.rankInterval').then(res => {
        this.rankingRange = res.msg || 0
      })
    },
    // 排名范围格式
    formatRankingRange(ranking) {
      let range = '-'
      if (!ranking || !this.rankingRange || this.rankingRange === 0) {
        return range
      }
      if (ranking <= this.rankingRange) {
        range = `1-${this.rankingRange}`
      } else {
        while (ranking % this.rankingRange !== 0) {
          ranking++
        }
        range = `${ranking - this.rankingRange + 1}-${ranking}`
      }
      return range
    },
    /** 导出按钮操作 */
    handleExport(operation) {
      if (operation === 'dept') {
        this.download(
          '/api/workbenches/leaders/excels',
          {
            ...this.queryParams
          },
          `站办所工作进度汇总_${new Date().getTime()}.xlsx`
        )
      } else if (operation === 'civil') {
        this.download(
          '/api/workbenches/leaders/cadres/excels',
          {
            ...this.queryParams
          },
          `干部工作进度汇总_${new Date().getTime()}.xlsx`
        )
      }
    },
    /** 查询站办所下拉树结构 */
    async getDeptTree() {
      await deptTreeSelect().then(response => {
        this.deptOptions = this.removeEmptyChildren(response.data)
      })
    },
    // 选择站办所
    handleDeptChange(val) {
      this.$refs.CascaderRef.dropDownVisible = false
      this.getCivilWorkList()
    },
    // 跳转功能页面
    handleToPage(col, row) {
      let query = {}
      let { deptId, civilServantId } = row
      if (deptId) query.deptId = deptId
      if (civilServantId) query.civilServantId = civilServantId
      query = { ...query, ...col.query }
      this.$router.push({ path: col.path, query })
    },
    // 年度选择
    handleCommandYear(year) {
      this.queryParams.year = year
      // 获取当前季度、季度列表（往年默认第一季度）
      let { quarter, quarterList } = quarterFormat(year)
      this.quarterOptions = quarterList
      this.handleCommandQuarter(quarter)
    },
    // 季度选择
    handleCommandQuarter(quarter) {
      this.queryParams.quarter = quarter
      this.getList()
    },
    optionsFormat(val, list) {
      let find = list.find(item => item.value === val)
      return find ? find.label : '-'
    },

    async getDicts() {
      await getDicts('biz_work_year_list').then(res => {
        this.yearOptions = res.data.map(item => {
          return { value: item.dictValue, label: item.dictLabel }
        })
        this.queryParams.year = this.yearOptions[0].value
      })
    },
    getDeptWorkList() {
      this.deptLoading = true
      listDeptWork(this.queryParams)
        .then(res => {
          this.deptLoading = false
          this.deptTableList = res.data
        })
        .catch(() => {
          this.deptLoading = false
        })
    },
    getCivilWorkList() {
      this.civilLoading = true
      listCivilWork(this.queryParams)
        .then(res => {
          this.civilLoading = false
          this.civilTableList = res.data
        })
        .catch(() => {
          this.civilLoading = false
        })
    },
    getList() {
      this.getDeptWorkList()
      this.getCivilWorkList()
    }
  }
}
</script>

<style lang="scss" scoped>
@import url('~@/assets/styles/workbench.scss');
::v-deep .table-header .cell {
  white-space: pre-wrap;
}
.table-icon {
  font-size: 18px;
  font-weight: 600;
}
.title-banner {
  height: 20px;
  padding: 30px 0;
  box-sizing: content-box;
}
</style>
